<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom创建表格</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }

        button {
            /* display: none; */
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>的使用创建dom节点动态生成表格</h1>
        <label for="">行：</label>
        <input type="text" id="row">
        <label for="">列：</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="生成">
        <p></p>
        <div id="output">
            <!-- <table>
                <tbody>
                    <tr>
                        <td>浮动法</td>
                    </tr>
                </tbody>
            </table> -->
        </div>
    </div>

    <script>
        var btn = document.querySelector('#btn')
        var row = document.querySelector('#row')
        var col = document.querySelector('#col')
        var output = document.querySelector('#output')

        btn.onclick = function () {
            // 获取 行 列
            var $row = row.value
            var $col = col.value

            var table = document.createElement('table')
            var tbody = document.createElement('tbody')
            table.appendChild(tbody)

            for (var i = 0; i < $row; i++) {
                // 外层循环 循环一次生成一行
                var tr = document.createElement('tr')

                // 隔行变色
                if (i % 2 === 0) {
                    tr.style.background = '#ccc';
                }

                for (var j = 0; j < $col; j++) {
                    var td = document.createElement('td')
                    var td = document.createElement('td');
                    td.innerHTML = '单元格' + i + j
                    tr.appendChild(td)
                }

                // 添加删除按钮
                var button = document.createElement("button");
                button.innerHTML = "删除";
                tr.appendChild(button);
                button.onclick = function () {
                    this.parentNode.remove();
                }

                // 添加复制按钮
                var button1 = document.createElement('button')
                button1.innerHTML = '复制'
                tr.appendChild(button1);
                button1.onclick = function () {
                    var copyNode=this.parentNode.cloneNode(true);
                    console.log(this.parentNode.parentNode);
                    
                    // this.parentNode.parentNode.append(copyNode);
                    this.parentNode.parentNode.insertBefore(copyNode,this.parentNode);
                }

                tbody.appendChild(tr)
            }
            output.appendChild(table)

        }
    </script>
</body>

</html>